<template>
  <div class="register">
    <el-card class="box-card">
      <div slot="header" class="card-title clearfix">
        <span>欢迎注册托马斯零食商城</span>
      </div>

      <el-tabs v-model="activeName" @tab-click="changeRole">
        <el-tab-pane label="普通注册" name="normalRegister">
          <normal-register></normal-register>
        </el-tab-pane>

        <el-tab-pane label="供应商注册" name="supplyRegister">
          <supply-register></supply-register>
        </el-tab-pane>
      </el-tabs>


    </el-card>
  </div>
</template>

<script>
import NormalRegister from "./register/NormalRegister";
import SupplyRegister from "./register/SupplyRegister";

export default {
  name: "Register",
  components: {
    NormalRegister,
    SupplyRegister
  },
  data() {
    return {
      activeName: 'normalRegister',
    }
  },
  methods: {
    changeRole() {

    }
  }
}
</script>

<style scoped>
.register {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.card-title {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.el-button {
  margin-right: 20px;
}
</style>